<template>
  <div class="odf-list">
    <h2>光交箱列表</h2>
    <ul>
      <li v-for="odf in odfs" :key="odf.id" @click="fetchOdfDetails(odf.id)" class="odf-item">
        {{ odf.id }} - {{ odf.location }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getOdfs } from '@/services/api.js';

export default {
  data() {
    return {
      odfs: [],
    };
  },
  created() {
    this.fetchOdfs();
  },
  methods: {
    fetchOdfs() {
      getOdfs()
        .then(response => {
          this.odfs = response.data;
        })
        .catch(error => {
          console.error('Error fetching ODFs:', error);
        });
    },
    fetchOdfDetails(odfId) {
      this.$router.push({ name: 'OdfDetails', params: { id: odfId } });
    },
  },
};
</script>

<style scoped>
.odf-list {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.odf-list h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.odf-list ul {
  list-style: none;
  padding: 0;
}

.odf-item {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.odf-item:hover {
  background-color: #f0f0f0;
}
</style>
